<template>

  <div>

    <div style="height: 30px; display: flex; justify-content: space-around; margin-top: 2vh;" class="box">
      <van-search style="width:90vw;" v-model="value" placeholder="有声书  小圈子" />
    </div>


    <div style=" display: flex; margin-top: 2vh;">

      <van-button round color="#999999"  v-for="item in anniua" :key="item" size="small" class="ml-5">{{item}}</van-button>

    </div>
    <div class="border-solid">

      <van-grid :border="false" :column-num="3">
        <van-grid-item>
          <van-image
              :src="require('@/assets/fengmian/1.png')"/>
        </van-grid-item>
        <van-grid-item>
          <van-image
              :src="require('@/assets/fengmian/2.png')"/>
        </van-grid-item>
        <van-grid-item>
          <van-image
              :src="require('@/assets/fengmian/3.png')"/>
        </van-grid-item>

      </van-grid>
    </div>

    <div>
      <span class=“text-align:center”>热听榜</span>

      <div class="w-screen container">
      <div class="border-solid">

        <van-grid :border="false" :column-num="3">
          <van-grid-item>
            <van-image
                :src="require('@/assets/fengmian/5.png')"/>
          </van-grid-item>
          <van-grid-item>
            <van-image
                :src="require('@/assets/fengmian/5.png')"/>
          </van-grid-item>
          <van-grid-item>
            <van-image
                :src="require('@/assets/fengmian/6.png')"/>
          </van-grid-item>

        </van-grid>
      </div>
    </div>
    </div>

    <div>
      <div class="px-4">  <van-button round type="success" size="large" color="#999999" style="height: 40px;">查看完整热听榜</van-button></div>
    </div>

    <div class="border-solid">

      <van-grid :border="false" :column-num="3">
        <van-grid-item>
          <van-image
              :src="require('@/assets/fengmian/7.png')"/>
        </van-grid-item>
        <van-grid-item>
          <van-image
              :src="require('@/assets/fengmian/8.png')"/>
        </van-grid-item>
        <van-grid-item>
          <van-image
              :src="require('@/assets/fengmian/9.png')"/>
        </van-grid-item>

      </van-grid>
    </div>
    <div class="border-solid">

      <van-grid :border="false" :column-num="3">
        <van-grid-item>
          <van-image
              :src="require('@/assets/fengmian/10.png')"/>
        </van-grid-item>
        <van-grid-item>
          <van-image
              :src="require('@/assets/fengmian/11.png')"/>
        </van-grid-item>
        <van-grid-item>
          <van-image
              :src="require('@/assets/fengmian/12.png')"/>
        </van-grid-item>

      </van-grid>
    </div>
    <div class="border-solid">

      <van-grid :border="false" :column-num="3">
        <van-grid-item>
          <van-image
              :src="require('@/assets/fengmian/13.png')"/>
        </van-grid-item>
        <van-grid-item>
          <van-image
              :src="require('@/assets/fengmian/14.png')"/>
        </van-grid-item>
        <van-grid-item>
          <van-image
              :src="require('@/assets/fengmian/15.png')"/>
        </van-grid-item>

      </van-grid>
    </div>

    <div class="border-solid">

      <van-grid :border="false" :column-num="3">
        <van-grid-item>
          <van-image
              :src="require('@/assets/fengmian/16.png')"/>
        </van-grid-item>
        <van-grid-item>
          <van-image
              :src="require('@/assets/fengmian/17.png')"/>
        </van-grid-item>
        <van-grid-item>
          <van-image
              :src="require('@/assets/fengmian/18.png')"/>
        </van-grid-item>

      </van-grid>
    </div>

    <div class="border-solid">

      <van-grid :border="false" :column-num="3">
        <van-grid-item>
          <van-image
              :src="require('@/assets/fengmian/19.png')"/>
        </van-grid-item>
        <van-grid-item>
          <van-image
              :src="require('@/assets/fengmian/20.png')"/>
        </van-grid-item>
        <van-grid-item>
          <van-image
              :src="require('@/assets/fengmian/21.png')"/>
        </van-grid-item>

      </van-grid>
    </div>

    <div class="border-solid">

      <van-grid :border="false" :column-num="3">
        <van-grid-item>
          <van-image
              :src="require('@/assets/fengmian/22.png')"/>
        </van-grid-item>
        <van-grid-item>
          <van-image
              :src="require('@/assets/fengmian/23.png')"/>
        </van-grid-item>
        <van-grid-item>
          <van-image
              :src="require('@/assets/fengmian/24.png')"/>
        </van-grid-item>

      </van-grid>
    </div>

    <div class="border-solid">

      <van-grid :border="false" :column-num="3">
        <van-grid-item>
          <van-image
              :src="require('@/assets/fengmian/25.png')"/>
        </van-grid-item>
        <van-grid-item>
          <van-image
              :src="require('@/assets/fengmian/26.png')"/>
        </van-grid-item>
        <van-grid-item>
          <van-image
              :src="require('@/assets/fengmian/27.png')"/>
        </van-grid-item>

      </van-grid>
    </div>


    <div class="border-solid">

      <van-grid :border="false" :column-num="3">
        <van-grid-item>
          <van-image
              :src="require('@/assets/fengmian/28.png')"/>
        </van-grid-item>
        <van-grid-item>
          <van-image
              :src="require('@/assets/fengmian/29.png')"/>
        </van-grid-item>
        <van-grid-item>
          <van-image
              :src="require('@/assets/fengmian/30.png')"/>
        </van-grid-item>

      </van-grid>
    </div>

    <div class="border-solid">

      <van-grid :border="false" :column-num="3">
        <van-grid-item>
          <van-image
              :src="require('@/assets/fengmian/31.png')"/>
        </van-grid-item>
        <van-grid-item>
          <van-image
              :src="require('@/assets/fengmian/32.png')"/>
        </van-grid-item>
        <van-grid-item>
          <van-image
              :src="require('@/assets/fengmian/33.png')"/>
        </van-grid-item>

      </van-grid>
    </div>
    <div class="border-solid">

      <van-grid :border="false" :column-num="3">
        <van-grid-item>
          <van-image
              :src="require('@/assets/fengmian/34.png')"/>
        </van-grid-item>
        <van-grid-item>
          <van-image
              :src="require('@/assets/fengmian/35.png')"/>
        </van-grid-item>
        <van-grid-item>
          <van-image
              :src="require('@/assets/fengmian/36.png')"/>
        </van-grid-item>

      </van-grid>
    </div>

    <div class="border-solid">

      <van-grid :border="false" :column-num="3">
        <van-grid-item>
          <van-image
              :src="require('@/assets/fengmian/37.png')"/>
        </van-grid-item>
        <van-grid-item>
          <van-image
              :src="require('@/assets/fengmian/38.png')"/>
        </van-grid-item>
        <van-grid-item>
          <van-image
              :src="require('@/assets/fengmian/39.png')"/>
        </van-grid-item>

      </van-grid>
    </div>

    <div class="border-solid">

      <van-grid :border="false" :column-num="3">
        <van-grid-item>
          <van-image
              :src="require('@/assets/fengmian/40.png')"/>
        </van-grid-item>
        <van-grid-item>
          <van-image
              :src="require('@/assets/fengmian/41.png')"/>
        </van-grid-item>
        <van-grid-item>
          <van-image
              :src="require('@/assets/fengmian/42.png')"/>
        </van-grid-item>

      </van-grid>
    </div>

  </div>
</template>

<script>
import { ref } from 'vue';
export default {
  setup() {
    const value = ref('');
    const anniua=['推荐','男生','女生','历史','商业','体育']



    return { value, anniua };
  },
};
</script>

<style scoped>

</style>
